<template>
  <div class="main">
    <div class="wind" v-show="flag">
      <div class="top">
        <div class="til">系统公告</div>
        <div class="cuo" @click="close">×</div>
      </div>
      <div class="gonggao">升级公告</div>
      <div class="word">
        澳門威尼斯人現已升級完畢，現 1$=1游戲分，
        請玩家上分時嚴格按照提示金額轉賬，
        如果沒有按照提示金額轉賬將會拒絕上分申請！謝謝您的配合，威尼斯娛樂祝您旗開得勝！
      </div>
      <div class="xia">下一则</div>
    </div>
    <div class="top_nav">
      <img src="../assets/images/dylogo.png" alt="" class="span" />
      <img src="../assets/images/211铃铛-线性.png" alt="" class="img" />
      <div class="hongdian"></div>
    </div>
    <div class="main2">
      <div class="banner"></div>
      <div class="con_anv">
        <div class="img">
          <img src="../assets/images/喇叭.png" alt="" />
        </div>
        <div class="til">
          澳門威尼斯人現已升級完畢，現 1$=1游戲分，
          請玩家上分時嚴格按照提示金額轉賬，
          如果沒有按照提示金額轉賬將會拒絕上分申請！謝謝您的配合，威尼斯娛樂祝您旗開得勝！
        </div>
      </div>
      <div class="money">
        <div class="left">
          <div class="top">
            <div><img src="../assets/images/金币 (1).png" alt="" /></div>
            <div class="qian">1088585.30</div>
          </div>
          <div class="renshu">綫上人數:23817</div>
        </div>
        <div class="right">
          <div class="box">
            <img src="../assets/images/icon_mobile_download.png" alt="" />
            <div>手機下載</div>
          </div>
          <div class="box">
            <img src="../assets/images/icon_wallet_deposit.png" alt="" />
            <div>充值</div>
          </div>
          <div class="box">
            <img src="../assets/images/icon_wallet_withdraw.png" alt="" />
            <div>提現</div>
          </div>
        </div>
      </div>
    </div>
    <div class="con">
      <div class="cont">
        <div class="left">
          <div class="nav" @click="change(1)" :class="classnum == 1 ? 'nav2' : ''">
            <div class="tu">
              <img src="../assets/images/game-live.d72ce7c.png" alt="" />
            </div>
            <div class="til">真人</div>
            <div class="hei"></div>
          </div>
          <div class="nav" @click="change(2)" :class="classnum == 2 ? 'nav2' : ''">
            <div class="tu">
              <img src="../assets/images/game-live.d72ce7c.png" alt="" />
            </div>
            <div class="til">棋牌</div>
            <div class="hei"></div>
          </div>
          <div class="nav" @click="change(3)" :class="classnum == 3 ? 'nav2' : ''">
            <div class="tu">
              <img src="../assets/images/game-live.d72ce7c.png" alt="" />
            </div>
            <div class="til">體育</div>
            <div class="hei"></div>
          </div>
          <div class="nav" @click="change(4)" :class="classnum == 4 ? 'nav2' : ''">
            <div class="tu">
              <img src="../assets/images/game-live.d72ce7c.png" alt="" />
            </div>
            <div class="til">電子</div>
            <div class="hei"></div>
          </div>
          <div class="nav" @click="change(5)" :class="classnum == 5 ? 'nav2' : ''">
            <div class="tu">
              <img src="../assets/images/game-live.d72ce7c.png" alt="" />
            </div>
            <div class="til">捕魚</div>
            <div class="hei"></div>
          </div>
          <div class="nav" @click="change(6)" :class="classnum == 6 ? 'nav2' : ''">
            <div class="tu">
              <img src="../assets/images/game-live.d72ce7c.png" alt="" />
            </div>
            <div class="til">電競</div>
            <div class="hei"></div>
          </div>
        </div>
        <div class="right">
          <div class="card">
            <div class="card2">
              <div class="til">LC</div>
              <div class="game1">開始游戲</div>
            </div>
          </div>
          <div class="card">
            <div class="card2">
              <div class="til">LC</div>
              <div class="game1">開始游戲</div>
            </div>
          </div>
          <div class="card">
            <div class="card2">
              <div class="til">LC</div>
              <div class="game1">開始游戲</div>
            </div>
          </div>
          <div class="card">
            <div class="card2">
              <div class="til">LC</div>
              <div class="game1">開始游戲</div>
            </div>
          </div>
          <div class="card">
            <div class="card2">
              <div class="til">LC</div>
              <div class="game1">開始游戲</div>
            </div>
          </div>
          <div class="card">
            <div class="card2">
              <div class="til">LC</div>
              <div class="game1">開始游戲</div>
            </div>
          </div>
          <div class="card">
            <div class="card2">
              <div class="til">LC</div>
              <div class="game1">開始游戲</div>
            </div>
          </div>
          <div class="card">
            <div class="card2">
              <div class="til">LC</div>
              <div class="game1">開始游戲</div>
            </div>
          </div>
          <div class="card">
            <div class="card2">
              <div class="til">LC</div>
              <div class="game1">開始游戲</div>
            </div>
          </div>
          <div class="card">
            <div class="card2">
              <div class="til">LC</div>
              <div class="game1">開始游戲</div>
            </div>
          </div>
          <div class="card">
            <div class="card2">
              <div class="til">LC</div>
              <div class="game1">開始游戲</div>
            </div>
          </div>
          <div class="card">
            <div class="card2">
              <div class="til">LC</div>
              <div class="game1">開始游戲</div>
            </div>
          </div>
          <div class="card">
            <div class="card2">
              <div class="til">LC</div>
              <div class="game1">開始游戲</div>
            </div>
          </div>
          <div class="card">
            <div class="card2">
              <div class="til">LC</div>
              <div class="game1">開始游戲</div>
            </div>
          </div>
          <div class="card">
            <div class="card2">
              <div class="til">LC</div>
              <div class="game1">開始游戲</div>
            </div>
          </div>
          <div class="card">
            <div class="card2">
              <div class="til">LC</div>
              <div class="game1">開始游戲</div>
            </div>
          </div>
          <div class="card">
            <div class="card2">
              <div class="til">LC</div>
              <div class="game1">開始游戲</div>
            </div>
          </div>
          <div class="card">
            <div class="card2">
              <div class="til">LC</div>
              <div class="game1">開始游戲</div>
            </div>
          </div>
          <div class="card">
            <div class="card2">
              <div class="til">LC</div>
              <div class="game1">開始游戲</div>
            </div>
          </div>
          <div class="card">
            <div class="card2">
              <div class="til">LC</div>
              <div class="game1">開始游戲</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="fot_nav">
      <div class="nav nav1">
        <img src="../assets/images/首页.png" alt="" />
        <span>首頁</span>
      </div>
      <div class="nav nav2">
        <img src="../assets/images/礼物.png" alt="" />
        <span>優惠</span>
      </div>
      <div class="nav nav3">
        <img src="../assets/images/金币.png" alt="" />
      </div>
      <div class="nav nav4">
        <img src="../assets/images/zcpt-微信客服管理 (1).png" alt="" />
        <span>客服</span>
      </div>
      <div class="nav nav5">
        <img src="../assets/images/我的-24 (1).png" alt="" />
        <span>我的</span>
      </div>
    </div>
  </div>
</template>
  
  <script>
export default {
  data(){
    return{
      flag: true,
      classnum : 1
    }
  },
  methods:{
    close(){
      this.flag = false
    },
    change(num){
      this.classnum = num
    }
  }
};
</script>
  
  <style lang="less" scoped>
.main {
  height: 100vh;
  background-image: url("../assets/images/login.jpg");
  background-size: 110%;
  background-size: cover;
  // background-repeat: repeat;
  background-position: 0rem 57px;
  display: flex;
  flex-direction: column;
  color: #fff;
  text-align: left;
  position: relative;
  .wind {
    width: 90%;
    height: 400px;
    z-index: 555;
    position: absolute;
    top: 120px;
    left: 50%;
    transform: translateX(-50%);

    background: url(../assets/images/dialog-dark.71997c1.png) #1f1f1f !important;
    border: 2px solid #d9b687 !important;
    border-radius: 15px;
    padding: 20px;
    box-sizing: border-box;
    .til,
    .gonggao {
      font-size: 18px;
      color: #d3aa74;
    }
    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .cuo {
        color: #fff;
        font-size: 30px;
      }
    }
    .gonggao{
      margin-top: 20px;
    }
    .word{
      padding: 10px;
      color: rgb(165, 165, 165);
      font-size: 14px;
      line-height: 25px;
    }
    .xia{
      width: 100%;
      height: 34px;
      border-radius: 5px;
      background-color: #d3aa74;
      line-height: 34px;
      text-align: center;
      font-size: 16px;
      margin-top: 90px;
    }
  }
  .con {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;

    .cont {
      position: relative;
      display: flex;
      width: 100%;
      .left {
        width: 25%;
        height: 50px;
        position: fixed;
        .nav {
          height: 35px;
          display: flex;
          margin-left: 20px;
          box-sizing: border-box;
          align-items: center;
          margin-bottom: 10px;
          .tu {
            img {
              width: 30px;
              height: 30px;
            }
          }
          .til {
            color: #d3aa74;
            font-size: 14px;
            margin-left: 10px;
          }
        }
        .nav2 {
          border-radius: 5px;
          text-shadow: 0 1px 2px rgb(0 0 0 / 30%) !important;
          background: linear-gradient(
            313deg,
            #d3aa74,
            #d3aa74 35%,
            #d9b687 37%,
            #d3aa74 53%,
            #d9b687 55%,
            #d3aa74
          ) !important;
          box-shadow: inset 0 -5px 0 -1px rgb(0 0 0 / 28%);
          position: relative;
          .til {
            color: #fff !important;
            position: absolute;
            right: 8px;
          }
          .tu {
            img {
              width: 35px;
              height: 35px;
              position: absolute;
              top: -15px;
            }
          }
          .hei {
            width: 12px;
            height: 6px;
            border-radius: 999px;
            background-color: rgba(148, 148, 148, 0.9);
            position: absolute;
            left: 15px;
            bottom: 7px;
          }
        }
      }
      .right {
        position: absolute;
        right: 0;
        width: 75%;
        overflow-y: scroll;
        border-left: 3px solid rgb(77, 77, 77);
        .card {
          margin-left: 15px;
          margin-right: 15px;
          height: 100px;
          border-radius: 10px;
          border: 1px solid #151515 !important;
          background-color: #d3aa74;
          margin-bottom: 10px;
          .card2 {
            background-image: url("../assets/images/game-card-dark.df8574b.png");
            background-size: cover;
            width: 100%;
            height: 100%;
            padding-top: 20px;
            box-sizing: border-box;
            margin-left: 3px;
          }
          .til {
            margin-left: 20px;
            color: #fff;
            // margin-top: 20px;
            font-size: 16px;
            font-weight: normal;
          }
          .game1 {
            width: 70px;
            height: 30px;
            line-height: 30px;
            border-radius: 600px;
            text-align: center;
            background-color: #d3aa74;
            margin-left: 20px;
            color: #fff;
            margin-top: 15px;
            font-size: 12px;
          }
        }
      }
    }
  }
  .main2 {
    .banner {
      width: 100%;
      height: 150px;
      background-image: url("../assets/images/4f9d541593d82b5431e7a0d188b5807d28dc7af.jpg");
      background-size: cover;
    }
    .con_anv {
      width: 100%;
      height: 34px;
      display: flex;
      align-items: center;
      .img {
        // margin-top: 3px;
        img {
          width: 20px;
          margin-right: 5px;
          margin-left: 10px;
        }
      }
      .til {
        font-size: 14px;
        overflow: hidden;
        white-space: nowrap;
        line-height: 34px;
      }
    }
    .money {
      display: flex;
      height: 70px;
      width: 100%;
      .left {
        width: 45%;
        .top {
          display: flex;
          align-items: center;
          margin-top: 5px;
          img {
            width: 20px;
            margin-left: 15px;
          }
          .qian {
            color: #d3aa74;
            font-size: 16px;
            margin-left: 5px;
          }
        }
        .renshu {
          font-size: 12px;
          margin-left: 15px;
        }
      }
      .right {
        width: 50%;
        display: flex;
        justify-content: space-around;
        margin-right: 5%;
        .box {
          display: flex;
          flex-direction: column;
          align-items: center;
          color: #d3aa74;
          font-size: 12px;
          img {
            width: 35px;
            margin-bottom: 5px;
          }
        }
      }
    }
  }
  .top_nav {
    width: 100%;
    height: 56px;
    background: url("../assets/images/texture-bg-dark.4f0074c.png") repeat,
      linear-gradient(180deg, #4d4c4a, #262626) !important;
    .span {
      width: 80px;
      position: absolute;
      left: 50%;
      top: 6px;
      transform: translateX(-50%);
    }
    .img {
      width: 30px;
      position: absolute;
      top: 14px;
      right: 20px;
    }
    .hongdian {
      width: 6px;
      height: 6px;
      background-color: rgb(255, 0, 0);
      position: absolute;
      border-radius: 50px;
      top: 17px;
      right: 27px;
    }
    
  }
  .fot_nav {
    width: 100%;
    height: 56px;
    background: url("../assets/images/texture-bg-dark.4f0074c.png") repeat,
      linear-gradient(180deg, #4d4c4a, #262626) !important;
    border-radius: 20px 20px 0px 0px;
    display: flex;
    .nav {
      display: flex;
      align-items: center;
      flex-direction: column;
      img {
        width: 23px;
        margin-bottom: 1px;
        margin-top: 8px;
      }
      span {
        color: #fff;
        font-size: 12px;
      }
    }
    .nav1 {
      margin-left: 22px;
    }
    .nav2 {
      margin-left: 57px;
    }
    .nav3 {
      margin-left: 26px;
      width: 65px !important;
      height: 65px !important;
      border-radius: 26px;
      transform: rotate(-45deg);
      margin-top: -23px;
      z-index: 6;
      border: 3px solid #e9e9e9;
      box-shadow: none;
      box-shadow: -4px 3px 0 0 rgb(21 21 21 / 10%), 5px 5px 15px 5px transparent;
      background: linear-gradient(
        313deg,
        #d3aa74,
        #d3aa74 35%,
        #d9b687 37%,
        #d3aa74 53%,
        #d9b687 55%,
        #d3aa74
      );
      img {
        width: 35px;
        transform: rotate(45deg);
        margin-top: 13px;
      }
    }
    .nav4 {
      margin-left: 30px;
    }
    .nav5 {
      margin-left: 56px;
    }
  }
}
</style>
  